<!--
 * @Author: 一日看尽长安花
 * @since: 2019-10-12 15:43:18
 * @LastEditTime : 2020-01-02 15:10:07
 * @LastEditors  : 一日看尽长安花
 * @Description:
 -->
<template>
  <div>
    <div class="block">
      <span class="demonstration">单选选择任意一级选项</span>
      <el-cascader
        v-model="mv1"
        :options="options"
        :props="{ checkStrictly: true }"
        clearable
      ></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration">多选选择任意一级选项</span>
      <el-cascader
        v-model="mv2"
        :options="options"
        :props="{ multiple: true, checkStrictly: true }"
        clearable
      ></el-cascader>
    </div>
    <div class="block">
      <el-cascader v-model="mv3" :props="props"></el-cascader>
    </div>
  </div>
</template>

<script>
let id = 0;
export default {
  name: 'Demo3',
  components: {},
  props: {},
  data() {
    return {
      mv1: {},
      mv2: {},
      mv3: {},
      options: [
        {
          value: 'zhinan',
          label: '指南'
        },
        {
          value: 'zujian',
          label: '组件'
        },
        {
          value: 'ziyuan',
          label: '资源'
        }
      ],
      props: {
        checkStrictly: true,
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            let datas = [];
            if (level < 3) {
              datas = Array.from({ length: level + 1 }).map(item => ({
                value: ++id,
                label: `选项${id}`,
                type: 'job_type'
              }));
            }
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(datas);
          }, 1000);
        }
      }
    };
  },
  computed: {},
  mounted() {},
  methods: {}
};
</script>
